@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap");

:root {
  --primary-color: #22254b;
  --secondary-color: #373b69;
}
* {
  /* 盒子大小不包括外边距 */
  box-sizing: border-box;
}
body {
  /* 背景颜色 */
  background-color: var(--primary-color);
  /* 字体 */
  font-family: "Poppins", sans-serif;
  /* 外边距 */
  margin: 0;
}

header {
  /* 内边距 */
  padding: 1rem;
  /* 弹性盒子 */
  display: flex;
  /* y轴上居中 */
  justify-content: flex-end;
  /* 背景颜色 */
  background-color: var(--secondary-color);
}

.search {
  /* 背景颜色 */
  background-color: transparent;
  /* 边框 */
  border: 2px solid var(--primary-color);
  /* 圆角 */
  border-radius: 50px;
  /* 字体 */
  font-family: inherit;
  /* 字体大小 */
  font-size: 1rem;
  /* 内边距 */
  padding: 0.5rem 1rem;
  /* 文本颜色 */
  color: #fff;
}

.search::placeholder {
  /* 文本颜色 */
  color: #7378c5;
}

.search:focus {
  /* 跟border类似 */
  outline: none;
  /* 背景颜色 */
  background-color: var(--primary-color);
}

main {
  /* 弹性盒子 */
  display: flex;
  /* flex 元素 被打断到多个行中 */
  flex-wrap: wrap;
  /* y轴上居中 */
  justify-content: center;
}

.movie {
  /* 宽度 */
  width: 300px;
  /* 外边距 */
  margin: 1rem;
  /* 背景颜色 */
  background-color: var(--secondary-color);
  /* 盒子阴影 */
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
  /* 相对定位 */
  position: relative;
  /* 溢出隐藏 */
  overflow: hidden;
  /* 圆角 */
  border-radius: 3px;
}

.movie img {
  /* 宽 */
  width: 100%;
}

.movie-info {
  /* 文本颜色 */
  color: #eee;
  /* 弹性盒子 */
  display: flex;
  /* x轴上居中 */
  align-items: center;
  /* 自动分配一样的 */
  justify-content: space-between;
  /* 间隔 */
  gap: 0.2rem;
  /* 内边距 */
  padding: 0.5rem 1rem 1rem;
  /* 文本间距 */
  letter-spacing: 0.5px;
}

.movie-info h3 {
  /* 上外边距 */
  margin-top: 0;
}

.movie-info span {
  /* 背景颜色 */
  background-color: var(--primary-color);
  /* 内边距 */
  padding: 0.25rem 0.5rem;
  /* 圆角 */
  border-radius: 3px;
  /* 字体粗细 */
  font-weight: bold;
}

.movie-info span.green {
  /* 文本颜色 */
  color: lightgreen;
}

.movie-info span.orange {
  /* 文本颜色 */
  color: orange;
}

.movie-info span.red {
  /* 文本颜色 */
  color: red;
}

.overview {
  /* 背景颜色 */
  background-color: #fff;
  /* 内边距 */
  padding: 2rem;
  /* 绝对定位 */
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  /* 最大高度 */
  max-height: 100%;
  /* 平移 */
  transform: translateY(101%);
  /* 溢出隐藏 */
  overflow-y: auto;
  /* 过度 */
  transition: transform 0.3s ease-in;
}

.movie:hover .overview {
  /* 平移 */
  transform: translateY(0);
}
